<template>
  <div class="preview-image">
    <el-dialog  :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose">
      <div class="content" style="position: relative;">
        <div class="dia_title">
          <p>{{editConfig.title}}</p>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <div class="dia_con">
          <div class="dia_con_left">
            <div class="vector">
              <img src="@/assets/images/deviceManage/Vector.png" alt="">
            </div>
            <div class="vector_info">
              <p>{{editConfig.infomation.position}}</p>
              <p>{{editConfig.infomation.boxCode}}</p>
            </div>
          </div>
          <div class="dia_con_right">
            <el-button size="mini" >在线</el-button>
          </div>
        </div>
        <div class="vidicon">
          <p>摄像机详情</p>
          <ul>
            <li><p>小区:</p><p>{{editConfig.infomation.area}}</p></li>
            <li><p>抓拍数量:</p><p>{{editConfig.infomation.captureNum}}</p></li>
            <li><p>安装时间:</p> <p>{{editConfig.infomation.installTime}}</p></li>
            <li><p>设备心跳时间:</p> <p>{{editConfig.infomation.heartTime}}</p></li>
            <li><p>设备箱编码:</p> <p>{{editConfig.infomation.boxCode}}</p></li>
            <li><p>名称:</p> <p>{{editConfig.infomation.name}}</p></li>
          </ul>
        </div>
        <div class="connect_vidicon">
          <!-- <p><el-button type="primary" size="small" disabled="true">连接测试</el-button></p> -->
          <!-- <div class="vidicon_vedio">
            
          </div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddSalesDetailsDialog",
  mixins: [],
  props: {
    editFormDialog: {
      type: Object,
      default: () => {
        return {
          title:"设备详情",
          visible: false,
          infomation: {
          },
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      editConfig:this.editFormDialog,
      dialogWidth: "39%",
      closeUrl: require("@/assets/img/close.png"),
    }
  },
  created() {
  },
  mounted(){
  },
  watch: {
  },
  methods: {
    handleClose() {
      this.pedestalList=[]
      this.editConfig.visible = false
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.preview-image {
  width: 760px;
  height: 734px;
  color:#fff;
  .dialog-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    height: 65px;
    background: #0a1a34;
  }
  .content {
    width: 760px;
    height: 734px;
    background-image: url("/public/panoramicData/pic_alert_bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    padding: 0 20px;
    position: relative;
    .dia_title{
      color:#fff;
      padding:10px 10px;
      font-size:28px;
      border-bottom:1px solid #fff;
      display:flex;
      justify-content: space-between;
      align-items: center;
      p{
        margin:0;
      }
      .el-image{
        display:block;
      }
      .close-box{
        margin-top:10px;
        .el-image{
          width:17px;
          height:17px;
          cursor:pointer;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-dialog{
  background: unset;
}
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__body {
  background: #0a1a34;
  width: 760px;
}
.dia_con{
  display:flex;
  margin:30px 0px;
  justify-content: space-between;
  .dia_con_left{
    margin-left:20px;
    display:flex;
    align-items: center;
    color:#fff;
    .vector{
      width: 55px;
      height: 48px;
      border-radius: 6px;
      opacity: 1;
      background: #D8D8D8;
      text-align:center;
      line-height:48px;
    }
    .vector_info{
      margin-left:10px;
      p{
        margin:0;
      }
      p:nth-of-type(1){
        font-size:18px;
      }
      p:nth-of-type(2){
        opacity: 1;
        font-family: Poppins;
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: 0px;
        color: #8291A9;
      }

    }
  }
  .dia_con_right{
    margin-right:20px;
    display:flex;
    align-items: center;
    .el-button{
      width: 90px;
      // height: 33px;
      // line-height: 33px;
      border-radius: 8px;
      opacity: 1;
      box-sizing: border-box;
      border: 1px solid #03F396;
      background:unset;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0px;
      color: #00FF9D;
    }
  }
}
.vidicon{
  width:100%;
  color:#fff;
  p{
    margin:0px 20px;
  }
  ul{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    li{
      width:50%;
      box-sizing:border-box;
      display:flex;
      text-align:"right";
      margin:10px 0px;
      p{
        width:50%;
        box-sizing:border-box;
        margin:0;
        // text-align:right;
      }
      p:nth-of-type(1){
        text-align:right;
      }
      p:nth-of-type(2){
        margin-left:20px;
      }
    }
  }
}
.connect_vidicon{
  p{
    text-align:right;
  }
  .vidicon_vedio{
    width:100%;
    height:300px;
    background:#000;
    margin:0 auto;
  }
}
</style>
